

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <title>css常用样式? - Hexo</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.6","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"copy_btn":true,"image_zoom":{"enable":true},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>yun&bo</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/img/index01.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="css常用样式?">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-01-14 15:47" pubdate>
        2021年1月14日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      2.6k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      36
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">css常用样式?</h1>
            
            <div class="markdown-body">
              <h1>css常用样式</h1>
<h2 id="居中">居中</h2>
<figure class="highlight scss"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs scss"><span class="hljs-selector-tag">Div</span>居中：<span class="hljs-attribute">margin</span>:auto <span class="hljs-number">0px</span>;<br>内容居中：<span class="hljs-attribute">text-align</span>:center;<br></code></pre></div></td></tr></table></figure>
<h2 id="字体属性：-font">字体属性：(font)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">大小 &#123;font-size: x-large;&#125;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD<br><br>样式 &#123;font-style: oblique;&#125;(偏斜体) italic;(斜体) normal;(正常)<br><br>行高 &#123;line-height: normal;&#125;(正常) 单位：PX、PD、EM<br><br>粗细 &#123;font-weight: bold;&#125;(粗体) lighter;(细体) normal;(正常)<br><br>变体 &#123;font-variant: small-caps;&#125;(小型大写字母) normal;(正常)<br><br>大小写 &#123;text-transform: capitalize;&#125;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)<br><br>修饰 &#123;text-decoration: underline;&#125;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)<br><br>常用字体： (font-family)<br><br>&quot;Courier New&quot;, Courier, monospace, &quot;Times New Roman&quot;, Times, serif, Arial, Helvetica, sans-serif, Verdana<br><br></code></pre></div></td></tr></table></figure>
<h2 id="背景属性：-background">背景属性： (background)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>色彩 &#123;background-color: #FFFFFF;&#125;<br><br>图片 &#123;background-image: url();&#125;<br><br>重复 &#123;background-repeat: no-repeat;&#125;<br><br>滚动 &#123;background-attachment: fixed;&#125;(固定) scroll;(滚动)<br><br>位置 &#123;background-position: left;&#125;(水平) top(垂直);<br><br>简写方法 &#123;background:#000 url(..) repeat fixed left top;&#125; /*简写·这个在阅读代码中经常出现，要认真的研究*/<br><br>区块属性： (Block) /*这个属性第一次认识，要多多研究*/<br><br>字间距 &#123;letter-spacing: normal;&#125; 数值 /*这个属性似乎有用，多实践下*/<br><br>对齐 &#123;text-align: justify;&#125;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)<br><br>缩进 &#123;text-indent: 数值px;&#125;<br><br>垂直对齐 &#123;vertical-align: baseline;&#125;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;<br><br>词间距word-spacing: normal; 数值<br><br>空格white-space: pre;(保留) nowrap;(不换行)<br><br>显示 &#123;display:block;&#125;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/<br></code></pre></div></td></tr></table></figure>
<h2 id="盒子属性：-Box">盒子属性： (Box)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左<br></code></pre></div></td></tr></table></figure>
<h2 id="边框属性：-Border">边框属性： (Border)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;<br><br>border-width:; 边框宽度<br><br>border-color:#;<br><br>简写方法border：width style color; /*简写*/<br></code></pre></div></td></tr></table></figure>
<h2 id="列表属性：-List-style">列表属性： (List-style)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">列表属性： (List-style)<br><br>类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;<br><br>位置list-style-position: outside;(外) inside;<br><br>图像list-style-image: url(..);<br><br></code></pre></div></td></tr></table></figure>
<h2 id="定位属性：-Position">定位属性： (Position)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>Position: absolute; relative; static;<br><br>visibility: inherit; visible; hidden;<br><br>overflow: visible; hidden; scroll; auto;<br><br>clip: rect(12px,auto,12px,auto) (裁切)<br></code></pre></div></td></tr></table></figure>
<h1>css属性代码大全</h1>
<h2 id="一-CSS文字属性：">一 CSS文字属性：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">color : #999999; /*文字颜色*/<br><br>font-family : 宋体,sans-serif; /*文字字体*/<br><br>font-size : 9pt; /*文字大小*/<br><br>font-style:itelic; /*文字斜体*/<br><br>font-variant:small-caps; /*小字体*/<br><br>letter-spacing : 1pt; /*字间距离*/<br><br>line-height : 200%; /*设置行高*/<br><br>font-weight:bold; /*文字粗体*/<br><br>vertical-align:sub; /*下标字*/<br><br>vertical-align:super; /*上标字*/<br><br>text-decoration:line-through; /*加删除线*/<br><br>text-decoration: overline; /*加顶线*/<br><br>text-decoration:underline; /*加下划线*/<br><br>text-decoration:none; /*删除链接下划线*/<br><br>text-transform : capitalize; /*首字大写*/<br><br>text-transform : uppercase; /*英文大写*/<br><br>text-transform : lowercase; /*英文小写*/<br><br>text-align:right; /*文字右对齐*/<br><br>text-align:left; /*文字左对齐*/<br><br>text-align:center; /*文字居中对齐*/<br><br>text-align:justify; /*文字分散对齐*/<br><br>vertical-align属性<br><br>vertical-align:top; /*垂直向上对齐*/<br><br>vertical-align:bottom; /*垂直向下对齐*/<br><br>vertical-align:middle; /*垂直居中对齐*/<br><br>vertical-align:text-top; /*文字垂直向上对齐*/<br><br>vertical-align:text-bottom; /*文字垂直向下对齐*/<br></code></pre></div></td></tr></table></figure>
<h2 id="二、CSS边框空白">二、CSS边框空白</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">padding-top:10px; /*上边框留空白*/<br><br>padding-right:10px; /*右边框留空白*/<br><br>padding-bottom:10px; /*下边框留空白*/<br><br>padding-left:10px; /*左边框留空白<br></code></pre></div></td></tr></table></figure>
<h2 id="三、CSS符号属性：">三、CSS符号属性：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">list-style-type:none; /*不编号*/<br><br>list-style-type:decimal; /*阿拉伯数字*/<br><br>list-style-type:lower-roman; /*小写罗马数字*/<br><br>list-style-type:upper-roman; /*大写罗马数字*/<br><br>list-style-type:lower-alpha; /*小写英文字母*/<br><br>list-style-type:upper-alpha; /*大写英文字母*/<br><br>list-style-type:disc; /*实心圆形符号*/<br><br>list-style-type:circle; /*空心圆形符号*/<br><br>list-style-type:square; /*实心方形符号*/<br><br>list-style-image:url(/dot.gif); /*图片式符号*/<br><br>list-style-position: outside; /*凸排*/<br><br>list-style-position:inside; /*缩进*/<br></code></pre></div></td></tr></table></figure>
<h2 id="四、CSS背景样式：">四、CSS背景样式：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">background-color:#F5E2EC; /*背景颜色*/<br><br>background:transparent; /*透视背景*/<br><br>background-image : url(/image/bg.gif); /*背景图片*/<br><br>background-attachment : fixed; /*浮水印固定背景*/<br><br>background-repeat : repeat; /*重复排列-网页默认*/<br><br>background-repeat : no-repeat; /*不重复排列*/<br><br>background-repeat : repeat-x; /*在x轴重复排列*/<br><br>background-repeat : repeat-y; /*在y轴重复排列*/<br></code></pre></div></td></tr></table></figure>
<h3 id="指定背景位置">指定背景位置</h3>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>background-position : 90% 90%; /*背景图片x与y轴的位置*/<br><br>background-position : top; /*向上对齐*/<br><br>background-position : buttom; /*向下对齐*/<br><br>background-position : left; /*向左对齐*/<br><br>background-position : right; /*向右对齐*/<br><br>background-position : center; /*居中对齐*/<br></code></pre></div></td></tr></table></figure>
<h2 id="五、CSS连接属性：">五、CSS连接属性：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">a /*所有超链接*/<br><br>a:link /*超链接文字格式*/<br><br>a:visited /*浏览过的链接文字格式*/<br><br>a:active /*按下链接的格式*/<br><br>a:hover /*鼠标转到链接*/<br><br>鼠标光标样式：<br><br>链接手指 CURSOR: hand<br><br>十字体 cursor:crosshair<br><br>箭头朝下 cursor:s-resize<br><br>十字箭头 cursor:move<br><br>箭头朝右 cursor:move<br><br>加一问号 cursor:help<br><br>箭头朝左 cursor:w-resize<br><br>箭头朝上 cursor:n-resize<br><br>箭头朝右上 cursor:ne-resize<br><br>箭头朝左上 cursor:nw-resize<br><br>文字I型 cursor:text<br><br>箭头斜右下 cursor:se-resize<br><br>箭头斜左下 cursor:sw-resize<br><br>漏斗 cursor:wait<br><br>光标图案(IE6) p &#123;cursor:url(&quot;光标文件名.cur&quot;),text;&#125;<br></code></pre></div></td></tr></table></figure>
<h2 id="六、CSS框线一览表：">六、CSS框线一览表：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>border-top : 1px solid #6699cc; /*上框线*/<br><br>border-bottom : 1px solid #6699cc; /*下框线*/<br><br>border-left : 1px solid #6699cc; /*左框线*/<br><br>border-right : 1px solid #6699cc; /*右框线*/<br><br>以上是建议书写方式,但也可以使用常规的方式 如下:<br><br>border-top-color : #369 /*设置上框线top颜色*/<br><br>border-top-width :1px /*设置上框线top宽度*/<br><br>border-top-style : solid/*设置上框线top样式*/<br><br>其他框线样式<br><br>solid /*实线框*/<br><br>dotted /*虚线框*/<br><br>double /*双线框*/<br><br>groove /*立体内凸框*/<br><br>ridge /*立体浮雕框*/<br><br>inset /*凹框*/<br><br>outset /*凸框*/<br></code></pre></div></td></tr></table></figure>
<h2 id="七、CSS表单运用：">七、CSS表单运用：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>文字方块<br><br>按钮<br><br>复选框<br><br>选择钮<br><br>多行文字方块<br><br>下拉式菜单 选项1选项2<br></code></pre></div></td></tr></table></figure>
<h2 id="八、CSS边界样式：">八、CSS边界样式：</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>margin-top:10px; /*上边界*/<br><br>margin-right:10px; /*右边界值*/<br><br>margin-bottom:10px; /*下边界值*/<br><br>margin-left:10px; /*左边界值*/<br></code></pre></div></td></tr></table></figure>
<h1>CSS 属性： 字体样式(Font Style)</h1>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">序号||中文说明||标记语法<br><br><br><br>1||字体样式||&#123;font:font-style font-variant font-weight font-size font-family&#125;<br><br><br><br>2||字体类型||&#123;font-family:&quot;字体1&quot;,&quot;字体2&quot;,&quot;字体3&quot;,...&#125;<br><br><br><br>3||字体大小||&#123;font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small&#125;<br><br><br><br>4||字体风格||&#123;font-style:inherit|italic|normal|oblique&#125;<br><br><br><br>5||字体粗细||&#123;font-weight:100-900|bold|bolder|lighter|normal;&#125;<br><br><br><br>6||字体颜色||&#123;color:数值;&#125;<br><br><br><br>7||阴影颜色||&#123;text-shadow:16位色值&#125;<br><br><br><br>8||字体行高||&#123;line-height:数值|inherit|normal;&#125;<br><br><br><br>9||字 间 距||&#123;letter-spacing:数值|inherit|normal&#125;<br><br><br><br>10||单词间距||&#123;word-spacing:数值|inherit|normal&#125;<br><br><br><br>11||字体变形||&#123;font-variant:inherit|normal|small-cps &#125;<br><br><br><br>12||英文转换||&#123;text-transform:inherit|none|capitalize|uppercase|lowercase&#125;<br><br><br><br>13||字体变形||&#123;font-size-adjust:inherit|none&#125;<br><br><br><br>14||字体||&#123;font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider&#125;<br><br></code></pre></div></td></tr></table></figure>
<h1>文本样式(Text Style)</h1>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br><br>序号||中文说明||标记语法<br><br><br><br>1||行 间 距||&#123;line-height:数值|inherit|normal;&#125;<br><br><br><br>2||文本修饰||&#123;text-decoration:inherit|none|underline|overline|line-through|blink&#125;<br><br><br><br>3||段首空格||&#123;text-indent:数值|inherit&#125;<br><br><br><br>4||水平对齐||&#123;text-align:left|right|center|justify&#125;<br><br><br><br>5||垂直对齐||&#123;vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super&#125;<br><br><br><br>6||书写方式||&#123;writing-mode:lr-tb|tb-rl&#125;<br></code></pre></div></td></tr></table></figure>
<h2 id="背景样式">背景样式</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>序号||中文说明||标记语法<br><br><br><br>1||背景颜色||&#123;background-color:数值&#125;<br><br><br><br>2||背景图片||&#123;background-image: url(URL)|none&#125;<br><br><br><br>3||背景重复||&#123;background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y&#125;<br><br><br><br>4||背景固定||&#123;background-attachment:fixed|scroll&#125;<br><br><br><br>5||背景定位||&#123;background-position:数值|top|bottom|left|right|center&#125;<br><br><br><br>6||背影样式||&#123;background:背景颜色|背景图象|背景重复|背景附件|背景位置&#125;<br><br><br><br></code></pre></div></td></tr></table></figure>
<h2 id="框架样式-Box-Style">框架样式(Box Style)</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html">序号||中文说明||标记语法<br><br>1||边界留白||&#123;margin:margin-top margin-right margin-bottom margin-left&#125;<br><br><br><br>2||补白||&#123;padding:padding-top padding-right padding-bottom padding-left&#125;<br><br><br><br>3||边框宽度||&#123;border-width:border-top-width border-right-width border-bottom-width border-left-width&#125;<br><br><br><br>宽度值||thin|medium|thick|数值<br><br><br><br>4||边框颜色||&#123;border-color:数值 数值 数值 数值&#125;　　数值：分别代表top、right、bottom、left颜色值<br><br><br><br>5||边框风格||&#123;border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove&#125;<br><br><br><br>6||边框||&#123;border:border-width border-style color&#125;<br><br><br><br>  上边框||&#123;border-top:border-top-width border-style color&#125;<br><br>  <br><br>  右边框||&#123;border-right:border-right-width border-style color&#125;<br><br>  <br><br>  下边框||&#123;border-bottom:border-bottom-width border-style color&#125;<br><br><br><br>左边框 &#123;border-left:border-left-width border-style color&#125;<br><br><br><br>7||宽度||&#123;width:长度|百分比| auto&#125;<br><br><br><br>8||高度||&#123;height:数值|auto&#125;<br><br><br><br>9||漂浮||&#123;float:left|right|none&#125;<br><br><br><br>10||清除||&#123;clear:none|left|right|both&#125;<br><br></code></pre></div></td></tr></table></figure>
<h2 id="分类列表">分类列表</h2>
<figure class="highlight html"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs html"><br>序号||中文说明||标记语法<br><br><br><br>1||控制显示||&#123;display:none|block|inline|list-item&#125;<br><br><br><br>2||控制空白||&#123;white-space:normal|pre|nowarp&#125;<br><br><br><br>3||符号列表||&#123;list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none&#125;<br><br><br><br>4||图形列表||&#123;list-style-image:URL&#125;<br><br><br><br>5||位置列表||&#123;list-style-position:inside|outside&#125;<br><br><br><br>6||目录列表||&#123;list-style:目录样式类型|目录样式位置|url&#125;<br><br><br><br>7||鼠标形状||&#123;cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize&#125;<br><br></code></pre></div></td></tr></table></figure>
<h1>css布局九子诀</h1>
<p>css布局九决，学css不再难简单的几句CCS布局口诀，  跟黑马学的</p>
<p>一、IE边框若显若无，须注意，定是高度设置已忘记；</p>
<p>二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；</p>
<p>三、三像素文本慢移不必慌，高度设置帮你忙；</p>
<p>四、兼容各个浏览须注意，默认设置行高可能是隐患；</p>
<p>五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；</p>
<p>六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。</p>
<p>七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。</p>
<p>八、图片链接排版须小心，图片链接文字链接若对对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。</p>
<p>九、IE浮动双边距，请用display：inline。</p>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/WEB/">WEB</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/javascript-css-%E6%A0%B7%E5%BC%8F/">javascript,css,样式</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/01/14/JavaScript%E4%B8%ADnull%E3%80%81undefined%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript中null、undefined有什么区别？</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/01/14/jQuery%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E9%80%89%E6%8B%A9%E5%99%A8/">
                        <span class="hidden-mobile">jQuery中有哪些选择器?</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://gitee.com/YunBoZhang" target="_blank" rel="nofollow noopener"><span>Gitee</span></a> <i class="iconfont icon-love"></i> <a href="https://gitee.com/YunBoZhang" target="_blank" rel="nofollow noopener"><span>Gitee</span></a> 
  </div>
  

  

  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":200})
    NProgress.start()
    document.addEventListener('DOMContentLoaded', function() {
      window.NProgress && window.NProgress.inc();
    })
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
